<template>
<div>
    <citys-home></citys-home>
    <seek-home :list="cities"></seek-home>
    <current-home :list="cities" :hotlist="hotCities" :letterci="letterci"></current-home>
    <letter-home :list="cities" @aplha="aplhas"></letter-home>
</div>
</template>

<script>
import CitysHome from './component/Citys.vue'
import SeekHome from './component/Seek.vue'
import CurrentHome from './component/Currentcity.vue'
import LetterHome from './component/Letter.vue'
import axios from 'axios'
export default {
  name: 'city',
  components: {
    CitysHome,
    SeekHome,
    CurrentHome,
    LetterHome
  },
  data () {
    return {
      cities: {},
      hotCities: [], /* 热门城市 */
      letterci: ''
    }
  },
  mounted () {
    axios.get('/lcoaldata/city.json')
      .then((res) => {
        // handle success
        let dataObj = res.data // json中所有的数据
        let dataList = dataObj.data // json中的data数据
        if (dataObj.ret && dataList) { // 如果后台处理成功并且列表数据有值，才做相关的数据操作
          this.cities = dataList.cities
          this.hotCities = dataList.hotCities
        }
      })
  },
  methods: {
    aplhas (key) {
      this.letterci = key
    }
  }
}
</script>

<style>
</style>
